<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 40px;
            background-image: url("../../img/1.png");
        }

        .regist {
            border: 7px inset #ccc;
            width: 700px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }

        .warn {
            color: red;
            font-size: 12px;
            display: none;
        }
    </style>

</head>
<body>
<form action="#" onsubmit="return tijiao()">
    <table width="700px" height="350px">
        <tr>
            <td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td>
        </tr>
        <tr>
            <td align="right">用户名</td>
            <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
                    id="loginnamewarn" class="warn">用户名长度不对</span></td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="50"/></td>
        </tr>
        <tr>
            <td align="right">确认密码</td>
            <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="50"/><span
                    id="pwdwarn" class="warn">密码不一致</span></td>
        </tr>
        <tr>
            <td align="right">Email</td>
            <td colspan="2"><input id="emailId" type="text" name="email" size="50"/> <span id="emailwarn"
                                                                                           class="warn">邮箱格式有误</span>
            </td>
        </tr>
        <tr>
            <td align="right">姓名</td>
            <td colspan="2"><input id="name" name="text" name="username" size="50"/><span id="xinming" class="warn">姓名格式有误</span> </td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td colspan="2"><input type="radio" name="gender" value="男" checked="checked"/>男 <input type="radio"
                                                                                                    name="gender"
                                                                                                    value="女"/>女
            </td>
        </tr>
        <tr>
            <td align="right">电话号码</td>
            <td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"
                                                                                         class="warn">手机格式有误</span>
            </td>
        </tr>
        <tr>
            <td align="right">所在地</td>
            <td colspan="3"><select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
                <option value="">----请-选-择-省----</option>
                <option value="0">北京</option>
                <option value="1">辽宁省</option>
                <option value="2">江苏省</option>
            </select> <select id="cityId" style="width:150px">
                <option>----请-选-择-市----</option>
            </select></td>
        </tr>
        <tr>
            <td width="80" align="right">验证码</td>
            <td width="100"><input type="text" name="verifyCode"/></td>
            <td><img src="../img/checkMa.png"/></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input id="rebtn" type="submit" value="注册"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    // 表单提交绑定函数
    function tijiao() {
        // 判断用户名
        let userNameInputObj = document.querySelector("#loginnameId");
        let username = userNameInputObj.value;
        // 长度必须是 5 - 8 之间
        if(!(/^[a-zA-Z0-9]{5,8}$/).test(username)){
            let warnObj = document.querySelector("#loginnamewarn");
            warnObj.style.display = "inline";
            return false;
        }else{
            let warnObj = document.querySelector("#loginnamewarn");
            // 进行输出
            warnObj.style.display = "none";
        }

        // 邮箱验证
        let emailInputObj = document.querySelector("#emailId");
        let email = emailInputObj.value;
        // 邮箱正则
        if(!(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email))){
            // 进行判断
            let warnObj = document.querySelector("#emailwarn");
            // 进行显示
            warnObj.style.display = "inline";
            // 返回结果
            return false;
        }else{
            let warnObj = document.querySelector("#emailwarn");
            warnObj.style.display = "none";
        }

        // 进行手机号验证
        let phonewarn = document.querySelector("#phonewarn");
        // 进行验证
        if(!(/^1(3|4|5|6|7|8)\d{9}$/.test(phonewarn))){
            // 进行判断
            let phoneTmp = document.querySelector("#phonewarn");
            // 进行显示
            phoneTmp.style.display = "inline";
            // 返回结果
            return false;
        }else{
            let warnObj  = document.querySelector("#phonewarn");
            warnObj.style.display = "none";
        }

        // 姓名验证
        // 获取输入姓名
        let name = document.querySelector("#name");
        // 进行验证
        if(!(/^[\u4E00-\u9FA5]{2,4}$/.test(name))){
            // 输出结果
            let nameUser = document.querySelector("#xinming");
            // 进行显示
            nameUser.style.display = "inline";
            return false;
        }else{
            let warnObj = document.querySelector("#xinming");
            warnObj.style.display = "none";
        }
    }
</script>
</body>
</html>